import { useEffect, useState } from "react";
import RecentQuestion from "./RecentQuestion";
import RecentAnswer from "./RecentAnswer";
import {
  getMyFollowedUserQuestionApi,
  getTop5Api,
  getMyFollowedUserAnswerApi,
} from "../../http/module/Question";
export default function UserPage() {
  const [isNotFollowedSendQuestion, setIsNotFollowedSendQuestion] =
    useState(false);
  const [recentQuestions, setRecentQuestions] = useState([]);
  const [myFollowedUserAnswerList, setMyFollowedUserAnswerList] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [isLogin] = useState(localStorage.getItem("isLogin") === "true");
  useEffect(() => {
    getMyFollowedUserAnswerApi().then((response) => {
      if (response.code === 200) {
        setMyFollowedUserAnswerList(response.data.records || []);
      }
    });
  }, [isLogin]);
  // 获取关注用户的问题数据
  useEffect(() => {
    const fetchQuestions = async () => {
      try {
        setLoading(true);
        const response = await getMyFollowedUserQuestionApi();
        if (response.code === 200) {
          if (response.data.records.length === 0) {
            //获取top5问题
            getTop5Api().then((res) => {
              if (res.code === 200) {
                setRecentQuestions(res.data || []);
                setIsNotFollowedSendQuestion(true);
              } else {
                throw new Error("获取数据失败");
              }
            });
          } else {
            setRecentQuestions(response.data.records || []);
          }
        } else {
          throw new Error("获取数据失败");
        }
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    if (isLogin) {
      fetchQuestions();
    } else {
      setLoading(false);
    }
  }, [isLogin]);
  if (error) {
    return <div className="text-red-500 p-4">错误：{error}</div>;
  }

  return (
    <div className=" mx-auto p-6 flex-1 gap-6 ">
      <div className="flex-1 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 border border-gray-100">
        {loading ? (
          <div className="text-center py-8">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto"></div>
          </div>
        ) : (
          <div className="bg-white p-4 rounded-lg  shadow-sm">
            <h3 className="text-lg font-semibold mb-4">
              {isNotFollowedSendQuestion ? "Top5" : "关注用户"}发布的问题
            </h3>
            {recentQuestions.length > 0 ? (
              <RecentQuestion questions={recentQuestions} />
            ) : (
              <div className="text-gray-500 text-center py-4">
                {isLogin
                  ? "你关注的人还没有发布任何问题"
                  : "请登录后查看关注用户的问题"}
              </div>
            )}
            <div className=" mt-4">
              {myFollowedUserAnswerList.length > 0 && (
                <div>
                  <h3 className="text-lg font-semibold mb-4">
                    你关注用户的最新回答
                  </h3>
                  <RecentAnswer questions={myFollowedUserAnswerList} />
                </div>
              )}
              {myFollowedUserAnswerList.length === 0 && (
                <div className="text-gray-500 text-center py-4">
                  {isLogin
                    ? "你关注的人还没有发布任何回答"
                    : "请登录后查看关注用户的回答"}
                </div>
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
